{% extends "base.html" %}

{% block content %}
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Import API</h6>
    </div>
    <div class="card-body">
        {% if error %}
        <div class="alert alert-danger">{{ error }}</div>
        {% endif %}
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold">Single API Import</h6>
                    </div>
                    <div class="card-body">
                        <form method="POST" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="file" class="form-label">Select API export file (.json)</label>
                                <input class="form-control" type="file" id="file" name="file" accept=".json" required>
                            </div>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-upload me-1"></i> Import API
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h6 class="m-0 font-weight-bold">Batch Import</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="batchFile" class="form-label">Select batch export file (.json)</label>
                            <input class="form-control" type="file" id="batchFile" accept=".json">
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="overwriteExisting">
                            <label class="form-check-label" for="overwriteExisting">
                                Overwrite existing APIs
                            </label>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="batchImport()">
                            <i class="bi bi-upload me-1"></i> Batch Import
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="alert alert-info mt-4">
            <h6 class="alert-heading">Import Instructions</h6>
            <ul class="mb-0">
                <li>API export files should be in JSON format</li>
                <li>Single import: Import one API from a single export file</li>
                <li>Batch import: Import multiple APIs from a batch export file</li>
                <li>If an API with the same ID already exists, it will be renamed with a suffix</li>
            </ul>
        </div>
    </div>
</div>

<!-- 导入结果模态框 -->
<div class="modal fade" id="importResultModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Result</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="importResultContent"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="window.location.reload()">View APIs</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function batchImport() {
    const fileInput = document.getElementById('batchFile');
    const overwrite = document.getElementById('overwriteExisting').checked;
    const file = fileInput.files[0];
    
    if (!file) {
        alert('Please select a file');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', file);
    
    fetch(`/api/batch_import?overwrite=${overwrite}`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            showImportResult(`
                <div class="alert alert-danger">
                    <h6 class="alert-heading">Import Failed</h6>
                    <p>${data.error}</p>
                </div>
            `);
        } else {
            let content = `
                <div class="alert alert-success">
                    <h6 class="alert-heading">Import Successful</h6>
                    <p>${data.message}</p>
            `;
            
            if (data.imported_apis && data.imported_apis.length > 0) {
                content += `<p><strong>Imported APIs:</strong> ${data.imported_apis.join(', ')}</p>`;
            }
            
            if (data.skipped_apis && data.skipped_apis.length > 0) {
                content += `<p><strong>Skipped APIs (already exist):</strong> ${data.skipped_apis.join(', ')}</p>`;
            }
            
            content += `</div>`;
            showImportResult(content);
        }
    })
    .catch(error => {
        showImportResult(`
            <div class="alert alert-danger">
                <h6 class="alert-heading">Import Failed</h6>
                <p>${error.message}</p>
            </div>
        `);
    });
}

function showImportResult(content) {
    document.getElementById('importResultContent').innerHTML = content;
    const modal = new bootstrap.Modal(document.getElementById('importResultModal'));
    modal.show();
}
</script>
{% endblock %}